<template>
  <ul class="tab-bar">
    <li class="tab-item" :class="[item.value == value ? 'active' : '']" v-for="(item,index) of tabList" :key="index" @click="changeTab(item,index)">
      <div>{{item.label}}</div>
      <div :class="[item.value == value ? 'line' : '']"></div>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    value: {},
  },
  data() {
    return {
      
      tabList: [
        { label: '特价活动', value: 1 },
        // { label: '常规特价', value: 2 },
        { label: '特价预告', value: 3 },
      ],
    }
  },
  methods: {
    changeTab(item, index) {
      if (this.value == item.value) return
      this.$emit('input', item.value)
      this.$emit('change', item.value, item, index)
    },
  },
}
</script>

<style lang="less" scoped>
.tab-bar {
  display: inline-block;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  z-index: 999;
  background: #fff;
  .tab-item {
    display: inline-block;
    text-align: center;
    width: 30%;
    height: 50px;
    opacity: 1;
    font-size: 36px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 400;
    color: #333333;
    line-height: 50px;
  }

  .line {
    padding-right: 36px;
    text-align: center;
    width: 100px;
    height: 4px;
    opacity: 1;
    background: #ff540d;
    border-radius: 4px;
    margin: 11px auto 0;
  }

  .active {
    display: inline-block;
    width: 30%;
    height: 50px;
    opacity: 1;
    font-size: 36px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 400;
    text-align: center;
    color: #333333;
    line-height: 50px;
    color: #ff540d;
  }
}
// .tab-bar {
//   display: flex;
//   height: 60px;
//   line-height: 60px;
//   overflow: hidden;
//   border-radius: 8px 8px 0 0;

//   .tab-item {
//     width: 50%;
//     height: 100%;
//     text-align: center;
//     font-size: 32px;
//     font-family: PingFang, PingFang-Regular;
//     font-weight: 400;
//     text-align: center;
//     background-color: #ff831c;
//     color: #ffffff;

//     &.active {
//       font-size: 32px;
//       font-family: PingFang, PingFang-Medium;
//       font-weight: 500;
//       text-align: center;
//       color: #ff831c;
//       background: #ff831c;
//       // background-color: #ff831c;
//       // background-image: ;
//     }
//     // &.active.left {
//     //   background-image: url('~@/assets/img/banner_left.png');
//     //   background-size: 100%;
//     // }
//     // &.active.right {
//     //   background-image: url('~@/assets/img/banner_right.png');
//     //   background-size: 100%;
//     // }
//   }
// }
</style>